<template>
  <div class="mask">

    <div class="box">
      <p class="p1">
      <div class="line"></div>
      <h2>新增承建商</h2>
      <el-icon @click="close">
        <close-bold />
      </el-icon>
      </p>
      <div class="info">
        <div class="line1-1"></div>
        <h3>企业信息</h3>
        <div class="mbox">
          <el-form :model="form" ref="ruleFormRef" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <div class="box1">
              <el-form-item label="承建商名称" prop="name">
                <el-input style="width: 277px; height: 40px" placeholder="请输入承建商名称" v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="企业登记注册类型">
                <el-select placeholder="---请选择---" style="width: 277px; height: 40px">
                  <el-option label="---请选择---"></el-option>
                  <el-option label="国有企业"></el-option>
                  <el-option label="集体企业"></el-option>
                  <el-option label="股份合作企业"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="工商营业执照号">
                <el-input style="width: 277px; height: 40px" placeholder="请输入工商营业执照注册号"></el-input>
              </el-form-item>
              <el-form-item label="企业营业地址">
                <el-input style="width: 277px; height: 40px" placeholder="请输入企业营业地址"></el-input>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="邮政编码">
                <el-input style="width: 277px; height: 40px" placeholder="请输入邮政编码"></el-input>
              </el-form-item>
              <el-form-item label="法定代表人" prop="daibiao">
                <el-input style="width: 277px; height: 40px" placeholder="请输入法定代表人姓名" v-model="form.daibiao"></el-input>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="代表人职务">
                <el-input style="width: 277px; height: 40px" placeholder="请输入法定代表人职务"></el-input>
              </el-form-item>
              <el-form-item label="代表人证件">
                <el-select placeholder="身份证" style="width: 277px; height: 40px">
                  <el-option label="护照"></el-option>
                  <el-option label="其他"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="证件号">
                <el-input style="width: 277px; height: 40px" placeholder="请输入证件号"></el-input>
              </el-form-item>
              <el-form-item label="注册资本" prop="ziben">
                <el-input style="width: 277px; height: 40px" placeholder="请输入注册资本" v-model="form.ziben"></el-input>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="注册日期">
                <el-date-picker v-model="form.enterdate" type="date" placeholder="请选择注册日期"
                  style="width: 277px; height: 40px">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="成立日期">
                <el-date-picker v-model="form.godate" type="date" placeholder="请选择成立日期"
                  style="width: 277px; height: 40px">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div class="info">
        <div class="line1-1"></div>

        <h3>企业联系信息</h3>
        <div class="mbox">
          <el-form :model="form" ref="ruleFormRef" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <div class="box1">
              <el-form-item label="企业联系人">
                <el-input style="width: 277px; height: 40px" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="企业联系手机">
                <el-input style="width: 277px; height: 40px" placeholder="请输入企业联系手机"></el-input>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="企业邮箱">
                <el-input style="width: 277px; height: 40px" placeholder="请输入企业邮箱"></el-input>
              </el-form-item>
              <el-form-item label="企业网站">
                <el-input style="width: 277px; height: 40px" placeholder="请输入企业网址"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div class="info">
        <div class="line1-1"></div>

        <h3>项目信息</h3>
        <div class="mbox">
          <el-form :model="form" ref="ruleFormRef" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <div class="box1">
              <el-form-item label="所属项目" :rules="[{ required: true }]">
                <el-select placeholder="自动带入" style="width: 277px; height: 40px">
                  <el-option label="自动带入"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="承建商性质" prop="nature">
                <el-select placeholder="---请选择---" style="width: 277px; height: 40px" v-model="form.nature">
                  <el-option v-for="item in inature" :key="item" :label="item" :value="item"></el-option>

                </el-select>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="项目经理" prop="jingli">
                <el-input style="width: 277px; height: 40px" placeholder="请输入项目负责人" v-model="form.jingli"></el-input>
              </el-form-item>
              <el-form-item label="联系手机" prop="phone">
                <el-input style="width: 277px; height: 40px" placeholder="请输入联系手机" v-model="form.phone"></el-input>
              </el-form-item>
            </div>

            <div class="box1">
              <el-form-item label="代表人证件">
                <el-select placeholder="身份证" style="width: 277px; height: 40px">
                  <el-option label="护照"></el-option>
                  <el-option label="其他"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="证件号">
                <el-input style="width: 277px; height: 40px" placeholder="请输入证件号"></el-input>
              </el-form-item>
            </div>
            <div class="box1">
              <el-form-item label="进场日期" prop="enterdate">
                <el-date-picker v-model="form.enterdate" type="date" placeholder="请选择进场日期"
                  style="width: 277px; height: 40px" value-format="YYYY-MM-DD">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="退场日期" prop="godate">
                <el-date-picker v-model="form.godate" type="date" placeholder="请选择退场日期" style="width: 277px; height: 40px"
                  value-format="YYYY-MM-DD">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <hr />
      <div class="but">
        <el-form-item>
          <el-button type="primary" @click="save(ruleFormRef)"
            style="background-color: #FF9900; border: none;">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseBold } from "@element-plus/icons";
import service from "../../../utils/service";
import { reactive, watch, ref } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from 'element-plus'

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
// 声明属性
const props = defineProps<{
  id: string;
}>();

// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();

const inature = reactive(["---请选择---", "总包单位", "分包单位", "监理单位"]);

interface Iform {
  id: any;
  name: string;
  nature: string;
  ziben: string;
  daibiao: string;
  jingli: string;
  phone: string;
  enterdate: string;
  godate: string;
}

// 当前管理员的数据
const form = reactive<Iform>({
  id: "",
  name: "",
  nature: "",
  ziben: "",
  daibiao: "",
  jingli: "",
  phone: "",
  enterdate: "",
  godate: "",
});
//根据id 进行获取
const getform = () => {
  service({
    url: "/contractorslist",
    params: {
      id: props.id,
    },
  }).then((res) => {
    form.name = res.data[0].name;
    form.nature = res.data[0].nature;
    form.ziben = res.data[0].ziben;
    form.daibiao = res.data[0].daibiao;
    form.jingli = res.data[0].jingli;
    form.phone = res.data[0].phone;
    form.enterdate = res.data[0].enterdate;
    form.godate = res.data[0].godate;
    console.log(res.data);
  });
};
watch(
  props,
  () => {
    getform();
    form.id = "";

  },
  {
    deep: true,
  }
);
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入承建商名称', trigger: 'blur' },
    {
      min: 3,
      max: 5,
      message: '长度在 3 到 5 个字符',
      trigger: 'blur',
    },
  ],
  ziben: [
    { required: true, message: '请输入注册资本', trigger: 'blur' },
    {
      min: 5,
      max: 20,
      message: '长度在 5 到 20 个字符',
      trigger: 'blur',
    },
  ],
  daibiao: [
    { required: true, message: '请输入法定代表人', trigger: 'blur' },
    {
      min: 2,
      max: 5,
      message: '长度在 3 到 5 个字符',
      trigger: 'blur',
    },
  ],
  nature: [
    { required: true, message: '请选择承建商性质', trigger: 'change' },
  ],
  jingli: [
    { required: true, message: '请输入项目负责人', trigger: 'blur' },
    {
      min: 2,
      max: 5,
      message: '长度在 2 到 5个字符',
      trigger: 'blur',
    },
  ],
  phone: [
    { required: true, message: '请输入联系手机', trigger: 'blur' },
    {
      min: 8,
      max: 20,
      message: '长度在 8 到 20 个字符',
      trigger: 'blur',
    },
  ],
  enterdate: [
    {
      type: 'date',
      required: true,
      message: '请选择进场日期',
      trigger: 'change',
    },
  ],
  godate: [
    {
      type: 'date',
      required: true,
      message: '请选择退场日期',
      trigger: 'change',
    },
  ]
})
// 取消
const close = () => {
  // 触发隐藏事件
  emit("hide");
};
// 保存并关闭
const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      service({
        url: "contractorslist/" + props.id,
        method: "post",
        data: form,
      }).then((res) => {
        if (form.name) {
          ElMessage({
            message: "添加数据成功",
            type: "success",
          });
          emit("hide"); //关掉自己
          emit("updatesuccess");
        }
      });
    } else {
      console.log('error submit!', fields)
    }
  })

}



</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.line {

  position: absolute;
  left: 0px;
  top: 10px;
  width: 5px;
  height: 22px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.line1-1 {
  position: absolute;
  left: 10px;
  top: 2px;
  width: 3px;
  height: 18px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.box {
  width: 900px;
  height: 600px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  overflow: auto;
}

.el-icon {
  width: 20px;
  height: 20px;
  color: #000;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box1 {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.but {
  margin-top: 10px;
  margin-left: 700px;
}

h2 {
  font-size: 16px;
  color: #666666;
  font-weight: 800;
  margin-top: 8px;
  margin-left: 16px;

}

h3 {
  font-size: 14px;
  color: #666666;
  font-weight: 800;
  margin-top: 20px;
  margin-left: 20px;
}
</style>